<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库信息</title>
    <link rel="stylesheet" type="text/css" href="/summer/css/summer.css">
    <script src="/lib/md5.min.js"></script>
    <script src="/summer/js/zbTool.js"></script>
    <script src="/summer/js/zbRouter.js"></script>
    <script src="/summer/js/zbRequest.js"></script>
    <script src="/summer/js/zbNotice.js"></script>
</head>
<body>

<div class="flex-col-start flex-alignitems-stretch">
    <div class="header border-bottom padding-8 flex-row-between flex-alignitems-bottom">
        <div class="font-s14"><a href="https://doc.hearu.top" target="_blank">SummerPHP</a></div>
        <div class="font-s25">数据库信息</div>
        <div class="font-s14" onclick="router.route('v_hosts')">首页</div>
    </div>
    <div class="content flex-col-start" id="content"></div>
</div>

<template id="tplHosts">
    <div class="text-center margin-y8">主机</div>
    <div class="list" id="hosts_list">
        <div class="list-item" onclick="router.route('v_databases_{host_name}')">
            <div class="list-item-body">{host_name}</div>
            <div class="list-item-desc font-c-grey">desc</div>
            <div class="list-item-action icon-right-arrow">&nbsp;</div>
        </div>
    </div>
</template>

<template id="tplDatabases">
    <div class="text-center margin-y8">数据库</div>
    <div class="list" id="db_list">
        <div class="list-item" onclick="router.route('v_tables_{host_name}&{db_name}')">
            <div class="list-item-body">{db_name}</div>
            <div class="list-item-desc"></div>
            <div class="list-item-action icon-right-arrow">&nbsp;</div>
        </div>
    </div>
</template>

<template id="tplTables">
    <div class="text-center margin-y8">数据表</div>
    <div class="list" id="table_list">
        <div class="list-item" onclick="router.route('v_fields_{host_name}&{db_name}&{table_name}')">
            <div class="list-item-body">{table_name}</div>
            <div class="list-item-desc">{desc}</div>
            <div class="list-item-action icon-right-arrow">&nbsp;</div>
        </div>
    </div>
</template>

<template id="tplFields">
    <div class="text-center margin-y8">字段</div>
    <div class="scroll-x width-r100">
        <table class="table width-r100">
            <tr>
                <th>字段名</th>
                <th>类型</th>
                <th>默认值</th>
                <th>字符集</th>
                <th>索引</th>
                <th>注释</th>
            </tr>
            <tr class="field_list">
                <td>{COLUMN_NAME}</td>
                <td>{COLUMN_TYPE}</td>
                <td>{COLUMN_DEFAULT}</td>
                <td>{CHARACTER_SET_NAME}</td>
                <td>{COLUMN_KEY}</td>
                <td>{COLUMN_COMMENT}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    let router = new zbRouter();
    let tool = new zbTool();
    let req = new zbRequest();
    let nt = new zbNotice();

    req.async = true; //异步请求
    req.defaultError = function (msg) {
        msg && nt.text(msg);
    }

    function getHosts() {
        req.request('db_hosts_name',null, function (rs){
            let hosts = [];
            for (let i=0;i<rs.length;i++) {
                hosts.push({host_name:rs[i]});
            }

            router.repeatInnerHTML('#hosts_list', hosts);
        });
    }

    function getDatabase(params){
        let host_name = params['host_name'];
        req.request('db_databases', {host_name:host_name}, function (rs){
            let dbList = [];
            for (let i=0; i<rs.length; i++) {
                dbList.push({host_name:host_name,db_name:rs[i]});
            }
            router.repeatInnerHTML('#db_list', dbList)
        })
    }

    function getTables(params){
        let host_name = params['host_name']
        let db_name = params['db_name'];
        req.request('db_tables', {host_name:host_name,db_name:db_name}, function (rs){
            let tableList = [];
            for (let i=0; i<rs.length; i++) {
                tableList.push({host_name:host_name,db_name:db_name,table_name:rs[i]});
            }

            router.repeatInnerHTML('#table_list', tableList);
        })
    }

    function getFields(params){
        let host_name = params['host_name']
        let db_name = params['db_name'];
        let table_name = params['table_name'];
        req.request('db_fields', {host_name:host_name,db_name:db_name,table_name:table_name}, function (rs){
            router.repeatOuterHTML('.field_list', rs);
        })
    }

    let config = [
        {pattern: 'v_hosts', params: "tpl:tplHosts,target:content", callback: getHosts},
        {pattern: 'v_databases_([a-zA-Z0-9_]+)$', params: "tpl:tplDatabases,target:content,host_name:@1", callback: getDatabase},
        {pattern: 'v_tables_([a-zA-Z0-9_]+)&([a-zA-Z0-9_]+)$', params: "tpl:tplTables,target:content,host_name:@1,db_name:@2", callback: getTables},
        {pattern: 'v_fields_([a-zA-Z0-9_]+)&([a-zA-Z0-9_]+)&([a-zA-Z0-9_]+)$', params: "tpl:tplFields,target:content,host_name:@1,db_name:@2,table_name:@3", callback: getFields},
    ];

    router.defaultRouter = 'v_hosts';
    router.init(config);
</script>
</body>
</html>